<template>
    <div>
        <el-row>
            <el-col :span=19 >
                <div class="grid-content bg-purple">
                    <el-form :inline="true" :model="queryMap" class="demo-form-inline">
                        <el-form-item label="订餐日期">
                            <el-date-picker
                                v-model="dateRange"
                                end-placeholder="结束日期"
                                range-separator="至"
                                start-placeholder="开始日期"
                                type="daterange"
                                value-format="yyyy-MM-dd"
                                style="width: 240px"
                            >
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="订餐状态">
                            <el-select v-model="queryMap.statusId"  clearable>
                                <el-option
                                    v-for="status in statusList" :key="status.statusId" :label="status.status"
                                    :value="status.statusId"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
            <el-col :span="3" :offset="2" >
                <el-button-group>
                    <el-button icon="el-icon-more" type="primary" @click="openDetail">查看详情</el-button>
                </el-button-group>
            </el-col>
        </el-row>
        <el-table
            :data="tableData"
            :height="530"
            border
            stripe
            style="width: 100%"
            @selection-change="handleSelectionChange"
        >
            >
            <el-table-column
                prop="orderId"
                type="selection"
            >

            </el-table-column>
            <el-table-column
                label="序号"
                type="index"
                width="60"
                align="center"
            >
            </el-table-column>
            <el-table-column
                label="发起人"
                prop="empName"
                width="140"
            >
            </el-table-column>
            <el-table-column
                label="部门名称"
                prop="deptName"
                width="140"
            >
            </el-table-column>
            <el-table-column
                label="订餐人员"
                prop="members"
                width="190"
            >
            </el-table-column>
            <el-table-column
                label="总金额"
                prop="totalprice"
                width="140"
                :formatter="formatPrice"
                align="right"
            >
            </el-table-column>
            <el-table-column
                label="订餐日期"
                prop="orderdate"
                width="200"
                align="center"
            >
            </el-table-column>
            <el-table-column
                label="订餐备注"
                prop="orderNote"
                width="180"
            >
            </el-table-column>
            <el-table-column
                label="订餐状态"
                prop="status"
                width="180"
            >
            </el-table-column>

        </el-table>
        <!-- 分页 -->
        <el-pagination
            :current-page="queryMap.page"
            :page-size="queryMap.limit"
            :page-sizes="[10, 20, 50, 100, 200]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        >
        </el-pagination>
        <OrderDetail
            :detailData="detailData"
            :detail-visible.sync="detailVisible"
        ></OrderDetail>
    </div>
</template>

<script>

import OrderDetail from "@/components/OrderDetail.vue";

export default {
    name: "OrderRecords",
    components: {OrderDetail},

    data() {
        return {
            //查询条件
            queryMap: {
                page: 1,  // 当前页码
                limit: 10, // 每页条数
                statusId:'',//订餐状态
                empId:'',
                before:'',
                after:'',
            },
            // 总条数
            total: 0,
            statusList:[],
            tableData: [],
            // 新增表单数据
            formData: {
                mealId: '',
                mealName: '',
                mealImage: '',
            },
            // 新增表单显隐
            formVisible: false,
            //标志新增还是修改,false为新增
            isEdit: false,
            //复选框选中的数据
            multipleSelection: [],
            dateRange:[],
            //订单的详情信息
            detailData: {
                reviewList:[],
                mealList: [],
                statusId:''
            },
            // 详情信息显隐
            detailVisible:false,

        }
    },
    methods: {
        // 查询所有订餐状态
        getStatusList() {
            const self = this;
            this.$http.get('statusList').then(res => {
                self.statusList = res.data;
            }).catch(error => {
                self.$message.error('查询订餐状态失败，请联系管理员')
            })
        },
        formatPrice(row, column, cellValue, index) {
            // 使用 toFixed 方法来格式化小数，保留两位小数
            // 注意：toFixed 返回的是一个字符串
            return cellValue.toFixed(2);
        },
        search(){
            // 重置页面未第一页
            this.queryMap.page = 1;
            this.getOrderList();
        },
        // 每页条数改变，val是改变后的每页条数
        handleSizeChange(val) {
            this.queryMap.limit = val;
            this.queryMap.page = 1;
            this.getDeptList();
        },
        // 页码改变，val是修改后的页面
        handleCurrentChange(val) {
            this.queryMap.page = val;
            this.getDeptList();
        },
        //打开订单详情
        openDetail(){
            const self = this
            //判断是否选中了一条数据,
            if (self.multipleSelection.length === 0) {
                self.$message({
                    type: 'warning',
                    message: "请选择要查看的数据"
                })
            } else if (self.multipleSelection.length > 1) {
                this.$message({
                    type: 'warning',
                    message: "只能选择一条数据"
                })
            } else {
                //获取选中行的主键
                let orderId = this.multipleSelection[0].orderId;
                this.detailVisible=true

                this.$http.get("/getOrderDetailById/" + orderId).then(res => {
                    //根据主键获取要修改的数据
                    this.detailData = res.data
                    this.detailVisible=true
                }).catch(error => {
                    self.$message.error("获取订餐失败")
                })
            }
        },
        //点击复选框触发,val是勾选中的数据
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        getOrderList(){
            const self = this
            if (self.dateRange == null) {
                this.dateRange=[]
            }
            self.queryMap.before = self.dateRange[0]
            self.queryMap.after = self.dateRange[1]
            this.$http.post('getOrderByPage', this.queryMap).then(res => {
                self.tableData = res.data.orders
                self.total = res.data.count
            }).catch(() => {
                this.$message.error('获取员工列表失败，请联系管理员')
            })
        }
    },
    computed: {
        // 从 Vuex 中获取 empId
        empId() {
            return parseInt(this.$store.state.user.empId);
        },
    },
    created() {
        this.queryMap.empId = this.empId;
        this.getStatusList();
        this.getOrderList()
    }
}
</script>

<style scoped>

</style>